<template>
	<div id="mainTextPage">
		<div class="title"><i class="iconfont icon-icon1"></i>欢迎来到全宇支付平台，让支付更简单</div>
		<!--实线-->
		<div class="solid"></div>
		<!--<div class="main_content">-->
			<!--<div class="section1">-->
				<!--<h4><i class="iconfont icon-datastatistics" style="margin: 0 20px;"></i>今日数据</h4>-->
				<!--<el-row>-->
					<!--<el-col :span="10">-->
						<!--<div class="account">-->
							<!--<div class="item" style="font-size: 25px;">21312.0￥</div>-->
							<!--<div class="item" style="margin-top: 6px;">账户余额<i class=""></i></div>-->
						<!--</div>-->
					<!--</el-col>-->
					<!--<el-col :span="14">-->
						<!--<div class="detail">-->
							<!--<div class="item item1">-->
								<!--<div class="div1 flexColoum">-->
									<!--<div>成功金额</div>-->
									<!--<div><b>0</b></div>-->
									<!--<div><b>￥</b></div>-->
								<!--</div>-->
								<!--<div class="div2 flexColoum">-->
									<!--<div>成功笔数</div>-->
									<!--<div><b>0</b></div>-->
									<!--<div><b>￥</b></div>-->
								<!--</div>-->
							<!--</div>-->
							<!--<div class="item item2 flexColoum">-->
								<!--<div>处理中笔数</div>-->
								<!--<div class="green"><b>12</b></div>-->
								<!--<i class="el-icon-loading"></i>-->
								<!--<div>处理中金额</div>-->
								<!--<div class="green"><b>6800</b></div>-->
							<!--</div>-->
							<!--<div class="item item3 flexColoum">-->
								<!--<div>冻结金额</div>-->
								<!--<div class="red"><b>12</b></div>-->
								<!--<i class="el-icon-circle-cross red"></i>-->
								<!--<div>失败金额</div>-->
								<!--<div class="red"><b>6800</b></div>-->
							<!--</div>-->
						<!--</div>-->
					<!--</el-col>-->

				<!--</el-row>-->
				<!--<el-row>-->
					<!--<el-col :span="12" id="myChart"></el-col>-->
					<!--<el-col :span="12" id="myChart2"></el-col>-->
				<!--</el-row>-->

			<!--</div>-->
			<!--<div class="section2">-->
				<!--<div class="title">最新消息<span>10条未读</span></div>-->
				<!--<ul class="newsitem">-->
					<!--<li class="item">-->

						<!--<div class="div1">-->
							<!--<span style="color: blue;">image</span>-->
						<!--</div>-->
						<!--<div class="div2">-->
							<!--大叔大叔大叔大叔-->
						<!--</div>-->
						<!--<div class="div3">-->
							<!--<span style="white-space: nowrap;">5分钟前</span>-->
						<!--</div>-->
					<!--</li>-->
				<!--</ul>-->
			<!--</div>-->
		<!--</div>-->

	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {
			//this.drawLine();
			this.getUserInfo();
			this.getPermissionList();
		},
		methods: {
//			drawLine() {
//				// 基于准备好的dom，初始化echarts实例
//				let myChart = this.$echarts.init(document.getElementById('myChart'));
//				let myChart2 = this.$echarts.init(document.getElementById('myChart2'));
//				// 绘制图表
//				myChart.setOption({
//					title: {
//						text: ''
//					},
//					type: 'line',
//					tooltip: {},
//					xAxis: {
//						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
//					},
//					yAxis: {},
//					series: [{
//						name: '销量',
//						type: 'bar',
//						data: [5, 20, 36, 10, 10, 20]
//					}]
//				});
//				myChart2.setOption({
//					title: {
//						text: ''
//
//					},
//
//					tooltip: {
//						trigger: 'axis'
//					},
//
//
//					calculable: true,
//					xAxis: [{
//						type: 'category',
//						boundaryGap: false,
//
//						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
//					}],
//					yAxis: {},
//					series: [{
////							name: '最高气温',
//							type: 'line',
//							data: [5, 3, 6, 7, 4, 6, 4],
//
//						}
//
//					]
//				});
//			},
			created(){
		        let username = sessionStorage.getItem("username");

			},
			getUserInfo() {
				this.$api.getUserInfo().then(function(res) {
					console.log(res.data)
				}).catch()
			},
			getPermissionList() {
				this.$api.getPermissionList().then(function(res) {
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="less">
	@import url("../../../static/icon1/iconfont.css");
	#mainTextPage {
		background-color: #f3f3f4;
		padding: 29px;
    height:100%;
		.green {
			color: green!important;
		}
		.red {
			color: red!important;
		}
		.flexColoum {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
		.icon-icon1 {
			font-size: 35px!important;
			margin-right: 35px;
			position: absolute;
			color: #008000;
			right: 200px;
			bottom: -8px;
		}
		.icon-datastatistics {
			font-size: 30px;
		}
		.title {
			text-align: right;
			font-size: 12px;
			margin-bottom: 10px;
			position: relative;
		}
		.solid {
			background-color: black;
			height: 2px;
		}
		.main_content {
			padding: 30px 0;
			display: flex;
			justify-content: space-around;
			.section1 {
				width: 480px;
				flex-shrink: 1;
				height: 450px;
				background-color: #fff;
				margin-right: 50px;
				padding: 10px;
				.account {
					width: 180px;
					height: 130px;
					background-color: #00bbee;
					color: white;
					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: left;
					padding-left: 15px;
				}
				h4 {
					text-align: left;
					padding: 10px 0;
					font-size: 14px;
				}
				.detail {
					display: flex;
					width: 100%;
					height: 130px;
					font-size: 14px;
					.item {
						width: 33.3%;
						height: 100%;
						border: 1px solid red;
						margin-right: 6px;
						display: flex;
						flex-direction: column;
						box-shadow: 0 1px 1px #ccc, 0 0 1px #ccc, 0 0 1px #ccc;
						.div1 {
							height: 65px;
							border: 1px solid blue;
							margin-bottom: 8px;
							box-shadow: 0 1px 10px #ccc, 0 0 1px #ccc, 0 0 1px #ccc;
						}
						.div2 {
							height: 60px;
							border: 1px solid blue;
							box-shadow: 0 1px 10px #ccc, 0 0 1px #ccc, 0 0 1px #ccc;
						}
					}
					.item1 {
						border: 0;
					}
					.item2 {
						border: 1px solid green;
					}
				}
			}
			.section2 {
				flex-shrink: 1;
				width: 420px;
				height: 450px;
				background-color: #fff;
				padding: 10px;
				font-size: 14px;
				.title {
					text-align: left;
					font-size: 16px;
					font-weight: bold;
					line-height: 40px;
					border-bottom: 2px solid #ccc;
					padding-left: 10px;
					span {
						background-color: #f8ac59;
						color: white;
						font-size: 14px;
						float: right;
						line-height: 15px;
						padding-right: 6px;
						border-radius: 3px;
						margin-top: 10px;
					}
				}
				.item {
					display: flex;
					.div1 {
						width: 60px;
					}
					.div2 {
						flex: 1;
					}
					.div3 {
						width: 60px;
					}
				}
			}
		}
	}

	#myChart,
	#myChart2 {
		height: 300px;
	}
</style>
